import React,{useState} from 'react'
import { Tabs,DatePicker  } from 'antd';
import moment from 'moment'

import VisitCard from './VisitCard'
import TaskCard from './TaskCard'
import Sales from './Sales'

const { TabPane } = Tabs
const { RangePicker } = DatePicker

export default function Hybrid(props) {
  const {data,months,task,sale_data}=props

  const [visitedArr] = useState(data.map(i=>i.data[3].data.reduce((p,c)=>p+c)))
  const [chooseDate, setChooseDate] = useState([])
  const [chooseSaleDate, setChooseSaleDate] = useState([])

  const callback=()=>{

  }

  const dataPickerChange=(dates)=>{
    if(!dates) {
      setChooseDate([])
      setChooseSaleDate([])
      return
    }
    let arr=dates.map(i=>{
      return {m:i._d.getMonth()+1}
    })
    setChooseDate(data.slice(arr[0].m-1,arr[1].m))
    setChooseSaleDate(sale_data.slice(arr[0].m-1,arr[1].m))
  }

  const disabledDate=(current)=> {
    return current < moment('2021-01') || current > moment('2022-01-01')
  }

  const datePicker=<RangePicker 
    placeholder={['请选择开始月份','请选择结束月份']} 
    onChange={dataPickerChange} 
    picker='month'
    disabledDate={disabledDate}
  ></RangePicker>

  return (
    <Tabs defaultActiveKey="1" onChange={callback} tabBarExtraContent={datePicker}>
      <TabPane tab="访问量" key="1">
        <div className='home-row2-content'>
          <VisitCard data={visitedArr} months={months} chooseDate={chooseDate}></VisitCard>
          <TaskCard task={task}></TaskCard>
        </div>
      </TabPane>
      <TabPane tab="销售量" key="2">
        <Sales data={sale_data} chooseData={chooseSaleDate}></Sales>
      </TabPane>
  </Tabs>
  )
}
